<template>
  <div>
    <el-form :model="params" ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
      <el-row >
        <el-col :span="6">
          <el-form-item label-width="0">
            <span @click="backPath()" style="cursor: pointer;"><i class="el-icon-arrow-left"></i>返回</span>
            <span class="primary">免配送费专区</span>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="$store.state.showAgent">
          <el-form-item label="所属区域">
            <el-select style="width:100%" v-model="params.agentid" filterable default-first-option placeholder="--区域--">
              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商户名称">
            <el-input style="width:100%" placeholder="请输入商户关键字" v-model="params.businessName" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="$store.state.showAgent ? 6 : 12" style="text-align: right;">
          <el-form-item label-width="0">
            <el-button type="primary" icon="el-icon-search"
                       @click="$refs.pagination.handleSizeChange(10)">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column type="index" label="#" width="40" align="center"></el-table-column>
        <el-table-column label="活动信息" min-width="200" align="left">
          <template slot-scope="scope">
            <div class="table-first flex">
              <div class="bus-img">
                <img :src="'http://image.jiaowawang.cn/'+scope.row.business.imgpath">
              </div>
              <div class="msg">
                <div class="name text-over" style="font-weight: 600">{{scope.row.business.name}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="活动详情" min-width="160" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.activity.ptype =='5'"> 在线支付满{{scope.row.activity.fulls}}元免运费</span>
            <span v-if="scope.row.activity.ptype =='7'">免{{scope.row.activity.lesss}}元运费</span>
          </template>
        </el-table-column>
        <el-table-column prop="activity.starttime"  label="活动开始时间" min-width="120" align="center"></el-table-column>
        <el-table-column prop="activity.endtime" label="活动开2始时间" min-width="120" align="center"></el-table-column>
        <el-table-column prop="activity.createtime" label="创建时间" min-width="140" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作（上线）" width="120" align="center">
          <template slot-scope="scope">
            <el-row type="felx" justify="center">
              <el-switch v-model="scope.row.business.specialArea" active-color="#13ce66"
                         @change="activitieOnline($event,scope.row)"></el-switch>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable"></pt-table-loading>
      <pt-pagination ref="pagination" :total="tableData.total" @listeningEvent="triggerEvent"></pt-pagination>
      </div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        isloadingTable: false, //表单等待
        params: {
          agentid: '', //区域id
          businessName: '',
          page: 0,
          size: 10,
          selectNum: '2',
        },
        tableData: {}
      }
    },
    computed: {
      restaurants() { // 区域数据
        return this.$store.state.agentList
      }
    },
    watch: {
      restaurants: {
        handler(val, oldVal) {
          if (val && val.length) {
            this.params.agentid = val[0].id
            this.getTableList()
          }
        },
        deep: true
      }
    },
    methods: {
      activitieOnline(type, row) { //上下线
        let isJoin = type ? '1' : '0'
        const params = { isJoin, activityId:row.activity.id, businessId:row.business.id}
        this.$http.post('/server/activity/joinSpecialArea', JSON.stringify(params)).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '设置成功'})
          }
          this.getTableList()
        })
      },
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      },
      getTableList() { //获取商家列表
        const params = { ...this.params }
        if (!params.agentid) {
          this.$message.error('必须一个区域')
          return false
        }
        this.isloadingTable = true
        this.$http.get('/server/activity/specialAreaList?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      },
      backPath() {
        this.$router.replace({path: '/main/activity/pron'})
      }
    },
    mounted() {
      if (this.restaurants && this.restaurants.length) {
        this.params.agentid = this.restaurants[0].id
        this.getTableList()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .primary {
    color: $c-active-aearps;
  }

  @import './css/zone.scss';
</style>
